<template>
  <n-config-provider class="h-full" :theme="theme" :theme-overrides="themeOverrides">
    <n-element class="h-full">
      <common-provider>
        <router-view></router-view>
      </common-provider>
    </n-element>
  </n-config-provider>
</template>

<script setup>
import CommonProvider from "@/components/provider/index.vue";
import {computed} from "vue";
import {darkTheme} from "naive-ui";
import {lighten} from "./utils";
import {designConfig} from "@/store";

const designTheme = designConfig();

const theme = computed(() => designTheme.darkTheme ? darkTheme : undefined)
const themeOverrides = computed(() => {
  const themeColor = designTheme.themeColor;
  const lightenStr = lighten(themeColor, 6);
  return {
    common: {
      primaryColor: themeColor,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
    },
    LoadingBar: {
      colorLoading: themeColor,
    },
  };
});
</script>

<style scoped>
.n-config-provider {
  height: 100vh;
}
</style>
